// 项目的根组件
// App --> index.js -->public/index.html(root)
// 使用引号传递字符串
// 使用JavaScript变量
// 函数调用和方法调用
// 使用JavaScript对象
import {useState} from 'react'
import './index.css'

export default function App() {
  const commentList=[
    {
      id:1,
      user:{
        uid:'12345',
        uname:'张三',
        avatar:''
      },
      content:'这是张三的高谈阔论',
      createTime:'2022-01-01',
      star:88
    },
    {id:2,
      user:{
        uid:'23456',
        uname:'李四',
        avatar:''
      },
      content:'这是李四的评论',
      createTime:'2022-02-01',
      star:98},
    {id:3,
      user:{
        uid:'34567',
        uname:'王五',
        avatar:''
      },
      content:'这是王五的胡言乱语',
      createTime:'2022-01-05',
      star:68}
  ]
  const user={
    uid:'12345',
    uname:'张三'
  }

  const handleDelete=(name,e)=>{
    alert('删除'+name+'的评论;'+e)
  }

  const [count,setCount]=useState(0)
  const [names,setNames]=useState({
    name:'张三'
  })

  return (
    <div className="App">
      <h1>评论列表</h1>
      {commentList.map(comment => (
        <div key={comment.id}>
          {comment.content}
          <p>...{comment.user.uname} 发表于：{comment.createTime}|{user.uid===comment.user.uid&&
            <button onClick={(e)=>handleDelete(comment.user.uname,e)} value='删除'>删除</button> }
          </p>
        </div>
        
      ))}
      <h1 className="title">计数器</h1>
      <p>{count}</p>
      <button onClick={()=>setCount(count+1)}>+1</button>
      <h1 style={{color:'red'}}>用户信息</h1>
      <p>{names.name}</p>
      <button onClick={()=>setNames({...names,name:'李四'})}>修改用户名</button>
      <button onClick={()=>setNames({name:'李四'})}>修改用户名(不写...names也可以)</button>
    </div>
  );
}
